<template>
	<page-meta :page-style="$theme.pageStyle">
		<!-- #ifndef H5 -->
		<navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
		<!-- #endif -->
	</page-meta>
	<view class="coupon-buy">
		<view class="item bg-white mx-[20rpx] my-[20rpx] px-4 py-4 btn-border flex flex-1 justify-between" @click="record">
			<view class="">使用记录</view>
			<u-icon name="arrow-right" color="#666"></u-icon>
		</view>
		<view v-for="(item, index) in formData" :key="index" @click="codelists(item.id)">
			<view class="coupon-card box-border bg-white flex items-center justify-between">
				<view class="flex items-center">
					<view class="coupon-icon flex items-center justify-center">
						<view class="font-medium text-4xl">￥{{item.price}}</view>
						<view class="text-sm">/{{item.num}}张</view>
					</view>
					<view class="ml-4">
						<view class="font-medium text-3xl mb-7">{{item.title}}</view>
						<view>下单后{{item.day}}天内可用</view>
					</view>
				</view>
				<view class="text-1xl mr-3 buys">去使用</view>
			</view>
			<view v-if="item.sname" class="zhu">注：该卡券仅供{{item.sname}}门店使用</view>
		</view>
		

		<view v-if="formData.length == 0" class="flex items-center justify-center px-[20rpx] py-[32rpx]">暂无可用卡券</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getMyCoupon } from '@/api/user';

const formData = ref<any>([

]);

const getData = async () => {
	formData.value = await getMyCoupon();
};


const codelists = async (id) =>{
	uni.navigateTo({
		url:'/pages/coupon_use/coupon_use_list?id='+id
	})
}

const record = async() =>{
	uni.navigateTo({
		url:'/pages/coupon_use/coupon_use_record'
	})
}

onLoad((options: any) => {
	getData();
});
</script>

<style lang="scss">
.coupon-buy {
	height: 100%;
	
	.zhu{
		color:#F13C00;
		padding: 10rpx;
		margin: 0 20rpx;
		margin-top: -28rpx;
		background-color: #fff;
	}

	.coupon-card {
		margin: 30rpx 20rpx;
		height: 200rpx;

		.coupon-icon {
			background: url('../../static/images/user/icon.png') no-repeat;
			background-size: 100% 100%;
			width: 200rpx;
			height: 200rpx;
			color: #fff;
			flex-shrink: 0;
		}

		.buys {
			background: #5274eb;
			border-radius: 35rpx;
			padding: 10rpx 35rpx;
			color: #fff;
			white-space: nowrap;
		}
	}
}
</style>

